﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <link rel="stylesheet" type="text/css" href="css/register.css">
    <link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_759899_jzjk7ltyxjh.css">
    <script src="js/lib/jquery-1.11.1.js"></script>
    <script src="js/lib/jquery.validate.js"></script>
    <script src="js/lib/additional-methods.js"></script>
    <script src="js/register.js"></script>
    <style>
        label.error{
            color: red;
            font-size: 12px;
            /*display: block;*/
            float: right;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="header">
        <div class="header-left">
            <div class="logo">
                <span class="logo">z</span>
                <span class="font">商城</span>
                <span class="url">www.zol.com</span>
            </div>
            <div class="name">
                <span>中关村在线旗下网上商城</span>
            </div>
        </div>
        <div class="header-right">
            <span>已有Z商城账号?<a href="login.html">立即登录</a></span>
        </div>
    </div>
    <div class="register">
        <div class="register-header">
            <span>30秒快速注册,加入Z商城</span>
        </div>
        <div class="register-body">
            <div class="register-left">
                <div class="register-left-body">
                    <div class="register-item">
                        <div class="title">
                            <div class="little-title">
                                <span class="iconfont icon-shouji2">用手机号注册</span>
                            </div>
                        </div>
                    </div>
                    <form id="register">
                    <div class="register-item">
                        <label for="phoneNumber" class="info"><span>*&nbsp;</span>手机号:</label>
                        <input type="text" id="phoneNumber" name="phoneNumber"/>
                    </div>
                    <div class="register-item">
                        <label for="yanz1" class="info"><span>*&nbsp;</span>验证码:</label>
                        <input type="text" id="yanz1" name="yanz1"/>
                        <span class="yanz">1546</span>
                    </div>
                    <div class="register-item">
                        <label for="yanz2" class="info"><span>*&nbsp;</span>验证码:</label>
                        <input type="text" id="yanz2" name="yanz2"/>
                        <input type="button" value="获取验证码" class="getyanz"/>
                    </div>
                    <div class="register-item">
                        <label for="password" class="info"><span>*&nbsp;</span>密码:</label>
                        <input type="text" id="password" name="pwd"/>
                    </div>
                    <div class="register-item">
                        <label for="password2" class="info"><span>*&nbsp;</span>确认密码:</label>
                        <input type="text" id="password2" name="pwd2"/>
                    </div>
                    <div class="register-item">
                        <input type="checkbox"/>
                        <span>同意</span>
                        <a href="#"> 《商城用户协议》</a><a href="#">《隐私权声明》</a>
                    </div>
                    <div class="register-item">
                        <button type="submit">注册</button>
                    </div>
                    </form>
                </div>
            </div>
            <div class="register-right">
                <div  class="title">
                    <span>如果您已经注册，请<a href="login.html">直接登录</a>或者用以下方式登录:</span>
                </div>
                <div class="register-right-body">
                    <div>
                        <a href="#" class="weixin"><span class="iconfont icon-weixin"> 微信账号登录</span></a>
                    </div>
                    <div>
                        <a href="#" class="weibo"><span class="iconfont icon-weibo"> 新浪微博登录</span></a>
                    </div>
                    <div>
                        <a href="#" class="qq"><span class="iconfont icon-qq"></span> QQ账号登录</a>
                    </div>
                    <div>
                        <a href="#" class="zhifubao"><span class="iconfont icon-zhifubao"></span> 支付宝登录</a>
                    </div>
                    <div>
                        <a href="#" class="icon5"><span class="iconfont icon-icon5"></span> 百度账号登录</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="footer">
    <div class="footer-left">
        <a href="#">关于Z商城</a><span>|</span>
        <a href="#">联系我们</a><span>|</span>
        <a href="#">帮助中心</a><span>|</span>
    </div>
    <div class="footer-right">
        <span>&copy;2018 中关村在线 版权所有</span>
    </div>
</div>
</body>
</html>